
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24" class="bg_hefei">
        <div id="id" class="o-echarts" style="width: 100%; height: 100%"></div>
      </el-col>
      <el-col class="bg_hefei" :span="12" :xs="24">
        <div class="o-echarts" id="id2" style="width: 100%; height: 100%"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="line">
      <el-col :span="24" :xs="24" class="bg_hefei">
        <div id="id3" class="o-echarts" style="width: 100%; height: 100%"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import JSON from './hefei.json'
export default {
  data () {
    return {
      myChart: null,
      myChart2: null,
      myChart3: null
    }
  },
  mounted () {
    // window.onresize = function () {
    //   this.myChart.resize()
    // }
    this.init()
  },
  methods: {
    init () {
      this.myChart = echarts.init(document.getElementById('id'))
      this.myChart2 = echarts.init(document.getElementById('id2'))
      this.myChart3 = echarts.init(document.getElementById('id3'))
      echarts.registerMap('hefei1', JSON)
      // window.onresize = this.myChart.resize // 自适应大小
      window.addEventListener('resize', () => {
        this.myChart2.resize()
        this.myChart.resize()
        this.myChart3.resize()
      })
      var option = {
        title: {
          top: 10,
          text: '合肥市各区区域大小'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (p / km2)'
        },
        visualMap: {
          min: 500,
          max: 50000,
          text: ['High', 'Low'],
          left: 'top',
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8']
          }
        },
        roam: false,
        series: [
          {
            name: '合肥',
            type: 'map',
            mapType: 'hefei1',
            aspectScale: 1.2, // 地图长度比
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#333'
                }
              }
            },
            data: [
              { name: '长丰县', value: 17000 },
              { name: '蜀山区', value: 10000 },
              { name: '庐阳区', value: 5000 },
              { name: '瑶海区', value: 20000 },
              { name: '肥东县', value: 25000 },
              { name: '包河区', value: 30000 },
              { name: '肥西县', value: 18000 },
              { name: '巢湖市', value: 2300 },
              { name: '庐江县', value: 20000 }
            ]
          }
        ]
      }
      var option2 = {
        title: {
          top: 10,
          text: '英雄联盟俱乐部粉丝数'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c}/万'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          data: ['EDG粉丝', 'FPX粉丝', 'WE粉丝', 'IG粉丝', 'RNG粉丝']
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 600,
                name: 'EDG粉丝'
              },
              {
                value: 200,
                name: 'FPX粉丝'
              },
              {
                value: 300,
                name: 'WE粉丝'
              },
              {
                value: 400,
                name: 'IG粉丝'
              },
              {
                value: 500,
                name: 'RNG粉丝'
              }
            ],
            roseType: 'area'
          }
        ]
      }
      var option3 = {
        title: {
          top: 10,
          text: '1h降水量',
          textStyle: {
            // fontWeight: 'normal',
            fontSize: 16
            // color: '#333'
          }
          // left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['CMCC', 'CTCC', 'CUCC'],
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
          }
        },
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
        }],
        yAxis: [{
          type: 'value',
          name: '(%)',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: [{
          name: 'CMCC',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(137, 189, 27, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(137, 189, 27, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(137,189,27)',
              borderColor: 'rgba(137,189,2,0.27)',
              borderWidth: 12

            }
          },
          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
        }, {
          name: 'CTCC',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 136, 212, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(0, 136, 212, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(0,136,212)',
              borderColor: 'rgba(0,136,212,0.2)',
              borderWidth: 12

            }
          },
          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
        }, {
          name: 'CUCC',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(219, 50, 51, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,50,51)',
              borderColor: 'rgba(219,50,51,0.2)',
              borderWidth: 12
            }
          },
          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
        }]
      }
      this.myChart.setOption(option)
      this.myChart2.setOption(option2)
      this.myChart3.setOption(option3)
    }
  }
}
</script>
<style lang="scss" scoped>
.bg_hefei {
  background-color: #fff;
  height: 350px;
  box-shadow: 0 0 15px -5px rgb(48, 65, 32);
}
.o-echarts {
  margin: 0 auto;
}
.line {
  margin-top: 30px;
}
</style>
